<template>
  <div>
  <el-dialog
    title="异常转办"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="40%"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px">
      <el-form-item label="异常责任人" prop="realname">
        <el-input type="text" v-model="form.realname" placeholder="请选择异常责任人" readonly>
          <el-button slot="append" icon="el-icon-search" @click="openUserDialog"></el-button>
        </el-input>
      </el-form-item>

      <el-form-item label="备注">
        <el-input type="text" v-model="form.des" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="saveloading" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
  <userList
    :visibles.sync="userDialog.visible"
    :multiple="false"
    :defaultValues="userDialog.defaulSelectUsers"
    :branchinnercode="userDialog.branchinnercode"
    :selectableCallBack="selectableUserCallBack"
    @closeDialog="closeUserDialog">
  </userList>
  </div>
</template>
<script>
  import {abnormalTransfer} from "@/api/exceptionMgmt/abnormal";
  import {mapGetters } from "vuex";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: ()=>{}
    }
  },
  data() {
    return {
      form: {
        id:null,
        username: null,
        realname:null,
        des: null
      },
      rules: {
        realname: [
          { required: true, message: "请选择异常责任人", trigger: "change" },
        ]
      },
      disabledUser:[],
      userDialog: {
        defaulSelectUsers:[],
        branchinnercode:"",
        visible: false
      },
      selectableUserCallBack: (row) => {
        return !this.disabledUser.includes(row.username)
      },
      saveloading: false
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val)
      },
      get() {
        return this.visible
      }
    },
    ...mapGetters([
      'baseDeptId'
    ])
  },
  methods: {
    handleClose() {
      this.saveloading = false
      this.resetFormData()
    },

    handleOpen() {
      this.form.id = this.row.id;
    },

    handleSubmit() {
      this.saveloading = true
      this.$refs.ruleForm
      .validate((flag) => {
        if (flag) {
          abnormalTransfer(this.form).then(res => {
            if (res.code == 200) {
              this.msgSuccess("操作成功")
              this.$emit("submit-success")
              this.dialogVisible = false
            } else {
              this.msgError(res.msg || "操作失败")
            }
            this.saveloading = false
          }).catch(() => {
            this.msgError("操作失败")
            this.saveloading = false
          })
        } else {
          this.saveloading = false
        }
      })
    },

    //打开人员选择器
    openUserDialog() {
      this.userDialog.defaulSelectUsers = [];
      this.userDialog.branchinnercode = this.baseDeptId;
      if(this.form.username){
        this.userDialog.defaulSelectUsers = [
          {
            username: this.form.username,
            realname:this.form.realname
          },
        ]
      }
      this.userDialog.visible = true
    },

    closeUserDialog(list){
      if(list?.length){
        this.form.username = list.map(item => item.username).join();
        this.form.realname = list.map(item => item.realname).join()
      }else{
        this.form.username = "";
        this.form.realname = "";
      }
    },

    resetFormData() {
      this.$refs.ruleForm?.resetFields()
      this.form = {
        id:null,
        username: null,
        des: null
      };
    },
  }
};
</script>
<style lang="scss" scoped>
.el-form {
  // display: flex;
  // justify-content: space-between;
  // flex-flow: wrap;
  // .el-form-item {
  //   width: 49%;
  // }
  .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }
}
.tool-bar{
  margin-bottom:20px
}
</style>
